<template>
  <div class="app-container">
    <h4 class="form-header h4">基本信息</h4>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item label="title" prop="title">
            <el-input v-model="form.title" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="appId" prop="appId">
            <el-input  v-model="form.appId" disabled />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <h4 class="form-header h4">接口信息</h4>
    <!--    <el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange" :data="apis.slice((pageNum-1)*pageSize,pageNum*pageSize)">-->
    <!--      <el-table-column label="序号" type="index" align="center">-->
    <!--        <template slot-scope="scope">-->
    <!--          <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--      <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>-->
    <!--      <el-table-column label="接口编号" align="center" prop="id" />-->
    <!--      <el-table-column label="接口url" align="center" prop="url" />-->
    <!--      <el-table-column label="请求方式" align="center" prop="requestMethod" />-->
    <!--      <el-table-column label="是否需要验签" align="center" prop="signature" />-->
    <!--      <el-table-column label="备注" align="center" prop="remark" >-->
    <!--        <template slot-scope="scope">-->
    <!--          <span>{{ parseTime(scope.row.createTime) }}</span>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--    </el-table>-->

    <!--    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />-->
    <el-tree
      :data="apis"
      show-checkbox
      ref="tree"
      default-expand-all
      highlight-current
      node-key="id"
      :default-checked-keys="apiChecked"
      :props="defaultProps">
    </el-tree>

    <el-form label-width="100px">
      <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {getAuthApi, updateAuthApi} from "@/api/system/api_user";

export default {
  name: "AuthApi",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 分页信息
      total: 0,
      pageNum: 1,
      pageSize: 10,
      // 选中角色编号
      apis: [],
      apiChecked: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 用户信息
      form: {}
    };
  },
  created() {
    const userId = this.$route.params && this.$route.params.appUserId;
    if (userId) {

      this.loading = true;
      getAuthApi(userId).then((response) => {
        this.form = response.appUser;
        this.apis = response.apis;
        this.setChecked(this.apis)
        this.total = this.apis.length;

        this.loading = false;
      });
    }
  },
  methods: {

    setChecked(nodes) {
      for (let node of nodes) {
        if (node.checked === true) {
          this.apiChecked.push(node.id)
        }
        // 如果节点有children属性，并且它是一个数组，则递归遍历它
        if (node.children && Array.isArray(node.children)) {
          this.setChecked(node.children);
        }
      }

    },

    /** 单击选中行数据 */


    /** 提交按钮 */
    submitForm() {
      let api = [];
      console.log(this.$refs.tree.getCheckedKeys());
      this.$refs.tree.getCheckedKeys().forEach((item) => {
        if (item != null) {
          api.push(item)
        }
      })
      const appUserId = this.form.appUserId;
      updateAuthApi({appUserId: appUserId, apiIds: api}).then((response) => {
        this.$modal.msgSuccess("授权成功");
        this.close();
      });
    },
    /** 关闭按钮 */
    close() {
      const obj = {path: "/system/api_user"};
      this.$tab.closeOpenPage(obj);
    },
  },
};
</script>
